<template>
  <div class="leftContainer">
    <Lease_title>今日事件总数</Lease_title>
    <Box :height="640">
      <div class="main-top">
        <img src="@/assets/images/panel/leftbar_iconcount@2x.png" alt="" />
        <div class="right-box">
          <div class="title">今日事件发生数量</div>
          <div class="num-box">
            同比
            <span>2.3%</span>
            <div class="num">1134</div>
            次
          </div>
        </div>
      </div>
      <LeaseTitle>各区事件发生情况</LeaseTitle>
      <div class="main-middle">
        <V3Echarts :options="option1" :height="230" :width="450" />
      </div>
      <div class="main-bottom">
        <LeaseTitle>重点街道拥堵状况</LeaseTitle>
        <V3Echarts :options="option3()" :height="230" :width="450" />
      </div>
    </Box>
    <Lease_title>道路安全监控</Lease_title>
    <Box :height="265">
      <video src="@/../public/video/xunjian.mp4" class="video" autoplay loop muted></video>
    </Box>
  </div>
</template>
<script lang="ts" setup>
import Lease_title from '@/components/Lease_title/index.vue'
import Box from '@/components/Box/index.vue'
import V3Count from '@/components/V3count/vue-countTo.vue'
import { ref, onBeforeMount, onMounted } from 'vue'
import { option1, option3 } from './chtOpt'
</script>
<style lang="scss" scoped>
.leftContainer {
  .main-top {
    @include hHeight(110);
    @include Padding(20, 0, 10, 10);
    display: flex;

    img {
      @include Width(62);
      @include wHeight(62);
      transform: translateZ(10px);
    }

    .right-box {
      @include Margin(3, 0, 0, 35);
      @include FontSize(18);

      .num-box {
        display: flex;
        @include MarginTop(20);

        align-items: baseline;

        span {
          color: rgb(83, 146, 134);
          @include MarginLeft(8);
        }

        .num {
          @include FontSize(24);
          @include MarginLeft(120);
          @include MarginRight(3);
          color: rgb(83, 146, 134);
        }
      }
    }
  }

  .main-middle {
    @include MarginTop(15);
  }

  .main-bottom {
    @include MarginTop(15);

    .travel-conditions-list {
      display: flex;
      flex-direction: column;
      @include MarginTop(20);

      .item {
        @include MarginBottom(16);

        display: flex;

        .icon-box {
          @include Width(48);
          @include wHeight(48);
          border: 1px solid rgba(151, 151, 151, 0.5);
          @include BorderRadius(4);
          display: flex;
          justify-content: center;
          align-items: center;
        }
        img {
          @include MarginLeft(25);
          @include Width(35);
          @include wHeight(35);
          transform: translateZ(10px);
        }

        .right-content {
          flex: 1;
          @include MarginLeft(40);
          @include MarginRight(120);
          display: flex;
          flex-direction: column;

          .item-title {
            @include FontSize(14);
            color: #fff;
            width: 100%;
            @include PaddingBottom(2);
            border-bottom: 1px solid rgba(151, 151, 151, 0.3);
            @include MarginBottom(8);
          }

          .item-value-box {
            @include Width(320);
            display: flex;
            justify-content: space-between;
            @include FontSize(14);

            .item-value {
              display: flex;

              .num {
                font-family: Tencent, serif;
                @include LineHeight(12);
                @include MarginRight(3);
                color: #cbeaff;
              }
            }
          }
        }

        // &:first-child {
        //     .item-value-box {
        //         // justify-content: flex-end;
        //     }
        // }
      }
    }
  }
  .video {
    @include hHeight(230);
    @include Width(430);
    @include MarginTop(15);
    @include MarginBottom(10);
  }
}
</style>
